<template>
  <div>
    <div id="dChartOne" style="width:100%;height:340px;"></div>
    <!-- <div class="circle"></div> -->
    <div class="list-box">
      <ul class="one-list">
        <li
          v-for="(item, index) in list"
          :key="index"
          :class="{ active: index === Index }"
          @click="changeKey(item.key)"
        >
          <p>
            <span
              class="point"
              :style="{ 'background-color': item.color }"
            ></span
            ><span class="label">{{ item.key }}</span
            ><i>：{{ item.percentage }}%</i>
          </p>
        </li>
      </ul>
    </div>
    <!-- noData -->
    <div v-if="noData" class="no-data">暂无数据</div>
  </div>
</template>

<script>
import Ecolors from "@/utils/chartsColors";
import { resize } from "@/utils/utils";
export default {
  mixins: [resize],
  props: {
    info: {
      type: Object,
    },
  },
  data() {
    return {
      dChartOne: null,
      dChartOneData: [],
      list: [],
      maxKey: "",
      Index: 0,
      noData: false,
    };
  },
  methods: {
    // 涉及技术领域
    getChartOneData() {
      this.dChartOne.showLoading({
        text: "loading",
        color: "#0b0a2b",
        textColor: "#0b0a2b",
        maskColor: "#fff",
        zlevel: 0,
      });

      this.$post(this.$Url.team.analysis, {
        musts: {
          date_sort: "1",
          "in2id.id": this.info.key,
        },
        aggs: {
          type: "base",
          size: "10",
          field: "ipc_kind",
        },
      })
        .then((res) => {
          let data = res.data;
          if (data && data.length > 0) {
            let d = JSON.parse(JSON.stringify(data));
            d = d.sort(function(a, b) {
              return Number(a.doc_count) < Number(b.doc_count) ? 1 : -1;
            });
            this.dChartOneData = d; // 保存的一个结果
            this.maxKey = d[0].key; // 最大key
            this.renderChartOne(d, true);
            this.getList(d);
            this.dChartOne.dispatchAction({
              type: "highlight",
              dataIndex: this.Index,
            });
          } else {
            this.noData = true;
            this.dChartOne.hideLoading();
          }
        })
        .catch((err) => {});
    },
    renderChartOne(data, isClick) {
      let seriesData = [];
      for (let i in data) {
        let NameColor = "#878696";
        let lineColor = "#ccc";
        let fontWeight = "500";
        if (isClick && data[i].key === this.maxKey) {
          NameColor = "#514bad";
          fontWeight = "bold";
          lineColor = "#514bad";
        }
        seriesData.push({
          name: data[i].key,
          value: data[i].doc_count,
          key: data[i].key,
          label: {
            normal: {
              rich: {
                name: {
                  color: NameColor,
                  fontWeight: fontWeight,
                },
              },
            },
          },
          labelLine: {
            normal: {
              lineStyle: {
                color: lineColor,
              },
            },
          },
        });
      }

      let option = {
        backgroundColor: "#fff",
        tooltip: {
          trigger: "item",
          formatter: "{b}: {c} ({d}%)",
          position: "top",
        },
        color: Ecolors.color,
        series: [
          {
            type: "pie",
            avoidLabelOverlap: true,
            legendHoverLink: true,
            // hoverAnimation: false,
            radius: ["38%", "56%"],
            minAngle: 30,
            startAngle: 70, //起始角度
            data: seriesData,
            itemStyle: {
              normal: {
                borderWidth: 2,
                borderColor: "#fff",
              },
            },
            label: {
              show: true,
              position: "outer",
              alignTo: "labelLine",
              distanceToLabelLine: 5,
              formatter: (params) => {
                let str = "";
                if (params.name.length > 10) {
                  str += `{nameStyle|${params.name.substring(0, 10)}...}`;
                } else {
                  str += `{nameStyle|${params.name}}`;
                }
                // console.log(params)
                // str += `{nameStyle|${params.percent}%}`
                str = `{nameStyle|${params.percent}%}`;
                return str;
              },
              rich: {
                icon: {},
                nameStyle: {
                  fontSize: 12,
                  color: "#86899e",
                },
              },
            },
          },
        ],
      };
      this.dChartOne.hideLoading();
      this.dChartOne.setOption(option);

      this.dChartOne.dispatchAction({
        type: "highlight",
        dataIndex: this.Index,
      });
    },
    getList(data) {
      let pArr = [];
      let keyArr = [];
      let maxCount = 0;
      for (let i in data) {
        keyArr.push(data[i].key.length);
        maxCount += Number(data[i].doc_count);
      }
      let arr = [];
      for (let i in data) {
        arr.push({
          color: Ecolors.color[i],
          key: data[i].key,
          percentage: ((data[i].doc_count / maxCount) * 100).toFixed(2),
        });
      }
      this.list = arr;
    },
    dChartOneClick(v) {
      // 取消之前的高亮 或者默认
      this.dChartOne.dispatchAction({
        type: "downplay",
      });
      if (this.Index !== v.dataIndex) {
        this.Index = v.dataIndex; // 点击高亮
        this.maxKey = v.data.key;
        this.dChartOne.dispatchAction({
          type: "highlight",
          dataIndex: this.Index,
        });
        // this.getTableData(v.name)
      } else {
        this.Index = -1;
        this.maxKey = -1;
        // this.getTableData()
      }
      this.renderChartOne(this.dChartOneData, true);
    },
    changeKey(key) {
      this.dChartOne.dispatchAction({
        type: "downplay",
      });
      if (this.maxKey !== key) {
        for (let i in this.dChartOneData) {
          if (key === this.dChartOneData[i].key) {
            this.Index = Number(i);
            this.maxKey = key;
            this.dChartOne.dispatchAction({
              type: "highlight",
              dataIndex: this.Index,
            });
            break;
          }
        }
      } else {
        this.Index = -1;
        this.maxKey = -1;
      }

      this.renderChartOne(this.dChartOneData, true);
    },
    dChartOneMove(v) {
      if (v.dataIndex === this.Index) {
        this.dChartOne.dispatchAction({
          type: "highlight",
          dataIndex: this.Index,
        });
      }
    },
  },
  watch: {
    info() {
      this.dChartOne = this.$echarts.init(document.getElementById("dChartOne"));
      this.dChartOne.on("mouseout", this.dChartOneMove);
      this.dChartOne.on("click", this.dChartOneClick);
      this.getChartOneData();
    },
  },
  // mounted() {
  //   // 涉及技术领域
  //   if (Object.keys(this.info).length > 0) {
  //     this.getChartOneData()
  //   }
  // },
  beforeDestroy() {
    this.dChartOne.off("mouseout");
    this.dChartOne.off("click");
    this.dChartOne.dispose();
  },
};
</script>

<style lang="scss" scoped>
.circle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  padding: 18%;
  margin-top: -18%;
  margin-left: -18%;
  border-radius: 50%;
  background-color: #eee;
}
.one-list-box {
  position: relative;
  left: 0;
  width: 100%;
  height: 30%;
  padding: 0 20px;
  overflow-y: auto;
}
.one-list {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 30px;
  list-style: none;
  li {
    position: relative;
    width: 50%;
    padding-top: 6px;
    padding-bottom: 6px;
    // padding-right: 20px;
    box-sizing: border-box;
    cursor: pointer;
    &.active {
      p {
        font-weight: bold;
        color: #504da6;
        i {
          color: #504da6;
        }
      }
    }
    p {
      position: relative;
      padding-right: 10px;
      margin-bottom: 0;
      font-size: 14px;
      color: #7674a3;
      overflow: hidden;
      text-overflow: ellipsis;
      // white-space: nowrap;
      .point {
        position: absolute;
        top: 50%;
        left: 0;
        display: inline-block;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        margin-top: -5px;
      }
      .label {
        display: inline-block;
        max-width: calc(100% - 70px);
        vertical-align: text-bottom;
        padding-left: 20px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      i {
        display: inline-block;
        width: 70px;
        line-height: 18px;
        font-style: normal;
        vertical-align: baseline;
      }
    }
  }
}
.no-data {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 40px;
  line-height: 40px;
  margin-top: -20px;
  text-align: center;
}
</style>
